/*flex 布局*/

.flex-col,
.flex-row {
    display: flex;
}
.flex-col {flex-direction: row;}
.flex-row {flex-direction: column;}

/*流式布局*/
.flex-parent {
    width: auto;
    height: auto;
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
}
.flex-child {
    box-sizing: border-box;
    flex: 0 0 25%;
}


/*对齐*/
.flex-col.flex-left {justify-content: flex-start;}
.flex-col.flex-right {justify-content: flex-end;}
.flex-col.flex-center {justify-content: center;}
.flex-col.flex-top {align-items: flex-start;}
.flex-col.flex-bottom {align-items: flex-end;}
.flex-col.flex-middle {align-items: center;}

.flex-row.flex-left {align-items: flex-start;}
.flex-row.flex-right {align-items: flex-end;}
.flex-row.flex-top {justify-content: flex-start;}
.flex-row.flex-bottom {justify-content: flex-end;}
.flex-row.flex-center {align-items: center;}
.flex-row.flex-middle {justify-content: center;}

.box-base{align-content: baseline;}
.box-space{
    display: flex;
    justify-content: space-between;
}
.box-center {
    flex-direction: column;
}
.box-middle,.box-center {
    display: flex;
    align-items: center;
    justify-content: center
}

